<template>
  <div class="container">
    <div class="upload-box">
      <!-- 第一个上传 -->
      <div
        v-show="isShowExcel === 'excel1' || isShowExcel === 'true'">
        <!-- <h4 
          v-show="isShowUpload"
          style="text-align: center;"
        >{{$t('page.entrance1')}}</h4> -->
        <el-upload ref="rebateUpload"
          class="upload-demo" drag action="aa"
          name="excel" :limit="1"
          :before-upload="beforeUpload"
          :headers="headerUpload" accept=".zip"
          :http-request="UploadImage"
          :on-remove="removeFile1"
          :show-file-list="false"
          :on-error="handleError"
          v-show="isShowUpload">
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">
            {{$t('page.drop')}}，<em>{{$t('page.click')}}</em>
          </div>
        </el-upload>
      </div>

      <!-- 第二个上传 -->
      <!-- <UploadFile 
        ref="secondUpload"
        v-show="isShowExcel === 'excel2' || isShowExcel === 'true'"
        @uploadExcel2="uploadExcel2"
        @removeFile="removeFile"
      ></UploadFile> -->
    </div>
    <div class="file-box">
      <div class="reset-back"
        v-show="isShowStepOne">
        <!-- 修改数据 -->
        <div class="link" @click="changLogData">
          {{$t('page.modData')}}</div>
        <!-- 清空数据 -->
        <span class="link"
          @click="handleRemove">{{$t('page.emptyData')}}</span>
      </div>
      <div class="upload-name-box">
        <!-- 上传文件名字 -->
        <div class="upload-name"
          v-show="isShowUploadtxt">
          {{uploadFile.name }}
          <el-button type='text'
            @click="removeFile1()">x</el-button>
        </div>
        <!-- 加载进度条 -->
        <el-progress :percentage="percentage"
          :color="customColor"
          v-show="isShowPer">
        </el-progress>
      </div>
    </div>
    <!-- 上传按钮 -->
    <div class="upload-btn">
      <el-button v-if="!isShowStepOne"
        type="primary" :loading="isLoading"
        @click="uploadHandler">
        {{$t('page.uploadText')}}</el-button>
    </div>

    <div class="container-body"
      v-show="isShowStepOne">
      <template>
        <div class="title-space">
          <span>{{$t('page.ODvalue')}}：</span>
        </div>
        <div
          v-for="(listItem,listIndex) in originalData"
          :key="listIndex">
          
          <div class="overflow">
            <!-- 大 - 数据表格 -->
            <table id="table-1">
              <tr
                v-for="(table,key,index) in setListItem(listItem)"
                :key="index">
                <!-- 浓度 -->
                <td class="color-000">
                  {{key!=='time'?key:$t('page.label')}}
                </td>
                <!-- 标签 -->
                <td>
                  <span v-if="key!=='time'">
                    {{beforeLable[index-1]}}
                  </span>
                  <span class="color-000"
                    v-else>{{$t('page.mark')}}
                  </span>
                </td>
                <td
                  v-for="(iTable, index) in table"
                  :key="index">
                  <span
                    v-if="key!=='time'">{{iTable}}</span>
                  <span class="color-000"
                    v-else>{{iTable + 's'}}</span>
                </td>
              </tr>
            </table>
          </div>
          <div class="overflow">
            <div class="title-space">
              <span>{{$t('page.sucrose') + $t('page.ODvalue')}}：</span>
            </div>
            <!-- 蔗糖减水：表格 -->
            <table id="table-1"
              style="margin-top:20px;">
              <tr
                v-for="(table,key,index) in reductionWaterList[0]"
                :key="index">
                <!-- 浓度 -->
                <td class="color-000">
                  {{key!=='time'?key:$t('page.label')}}
                </td>
                <!-- 标签 -->
                <td>
                  <span 
                    v-if="key!=='time'">
                    {{beforeLable[index-1]}}
                  </span>
                  <span 
                    class="color-000"
                    v-else>{{$t('page.mark')}}
                  </span>
                </td>
                <td
                  v-for="(iTable, index) in table"
                  :key="index">
                  <span
                    v-if="key!=='time'">{{iTable}}</span>
                  <span class="color-000"
                    v-else>{{iTable + 's'}}</span>
                </td>
              </tr>
            </table>
          </div>

          <div class="space"
            v-if="dissType === 'v1'">
            <div class="title-space">
              <span>{{$t('page.ODrate')}}（%）：
              </span>
            </div>

            <div class="overflow"
              v-for="lightRateItem,lightRateIndex in lightRate"
              :key="lightRateIndex">
              <table id="table-1">
                <tr
                  v-for="(table,key,index) in lightRateItem"
                  :key="index">
                  <td class="color-000">
                    {{key!=='time'?key:$t('page.hole')}}
                  </td>
                  <td>
                    <span v-if="key!=='time'">
                      {{beforeLable[index-1]}}{{unit}}
                    </span>
                    <span class="color-000"
                      v-else>
                      {{$t('page.parameter')}}
                    </span>
                  </td>
                  <td
                    v-for="(iTable, index) in table"
                    :key="index">
                    <span
                      v-if="key!=='time'">{{iTable}}</span>
                    <span class="color-000"
                      v-else>{{iTable + 's'}}</span>
                  </td>
                </tr>
              </table>
            </div>
          </div>

          <!-- 不知道什么用 -->
          <div class="space text-center">
            <template
              v-for="(chart,index) in allLightRateCharts">
              <div class="chart" :key="index">
                <wave-chart
                  :id="'LightRate1'+index"
                  :data='chart'>
                </wave-chart>
              </div>
            </template>
          </div>

          <!-- 柱状图 -->
          <Histogram 
            v-show="graphicalList.includes('1')" 
            :data="map_Max_min" 
            @shotImg="shotImg(graphicalList.includes('1'), $event)"/>

          <!-- 线型echarts -->
          <Saccharose 
            v-show="graphicalList.includes('2')"
            style="margin-top: 40px"
            :originalData="originalData"
            id="waveRate"
            :title="$t('page.fullSpect')"
            :resultValue="resultValue"
            @showImg="shotImg(graphicalList.includes('2'), $event )"></Saccharose>

          <Saccharose 
            v-show="graphicalList.includes('3')"
            style="margin-top: 40px"
            :originalData="reductionWater"
            id="waveSingle"
            :title="$t('page.sucrose') + $t('page.fullSpect')"
            :resultValue="resultValue"
            @showImg="shotImg(graphicalList.includes('3'), $event)"></Saccharose>

          <!-- <Saccharose style="margin-top: 40px"
            :originalData="subtract"
            id="innerCharts"
            :title="$t('page.spectralDifference')"
            :resultValue="resultValue"
            @showImg="shotImg"></Saccharose> -->
        </div>

        <!-- 计算结果 -->
        <div class="title-space">
          <span>{{$t('page.calResultes')}}：</span>
          <el-button type="text"
            @click="downloadExl()" size="mini">
            {{$t('page.export')}}</el-button>
        </div>


        <!-- 没用 -->
        <div class="space" v-show="isShowStepTwo">

          <div v-if="dissType === 'v1'">
            <div class="overflow step-two">
              <table id="table-1">
                <template
                  v-for="stepTwoItem in stepTwoList">
                  <tr
                    v-for="(table,key,index) in stepTwoItem"
                    :key="index">
                    <td class="color-000">
                      <span
                        v-if="key!=='title'">{{key}}</span>
                      <span
                        v-else>{{$t('page.hole')}}</span>
                    </td>
                    <td
                      v-for="(iTable, iIndex) in table"
                      :key="iIndex"
                      class="color-000">
                      <template
                        v-if="key ==='title'">
                        <span
                          v-html="iTable"></span>
                      </template>
                    </td>
                    <td
                      v-for="(iTable, index) in table"
                      :key="index">
                      <template
                        v-if="key !=='title'">
                        <span
                          :style="{color:iTable===extA?'#409eff':''}"
                          v-if="iTable===extA">
                          ({{$t('page.recommended')}}){{iTable}}</span>
                        <span v-else>
                          {{iTable}}</span>
                      </template>
                    </td>
                  </tr>
                </template>
              </table>
            </div>

            <div class="img-list"
              v-for="img,index in imgList"
              :key="index"
              style="width:60%;float:left;">
              <div class="img-item">
                <img :src="img" alt="">
              </div>
            </div>

            <div
              style="width:40%;float:left;padding-left:50px;margin-top:25px;">
              <table id="table-2">
                <tr>
                  <td width="50%">
                    {{$t('page.formula')}}
                  </td>
                  <td>
                    y=x*Rmax/(x+KD)
                  </td>
                </tr>
                <tr>
                  <td width="50%">
                    {{$t('page.parameter')}}</td>
                  <td>
                    <span
                      class="data-item">Ka:{{parameter[1]}}</span>
                    <span
                      class="data-item">Kd:{{parameter[2]}}</span>
                    <span
                      class="data-item">KD:{{parameter[3]}}</span>
                  </td>
                </tr>

                <tr>
                  <td width="50%">
                    {{$t('page.parameter')}}</td>
                  <td>
                    <span
                      class="data-item">{{parameter[0]}}</span>
                  </td>
                </tr>
              </table>
            </div>
          </div>

        </div>
      </template>

      <div class="space text-center">
      </div>
    </div>
    
    <!------------------ 截图曲线 -->
    <div class="m-top-fff"
      v-if="showScreenshotsImg">
      <template
        v-for="(chart,index) in allStepOneCharts">
        <wave-chart :key="index"
          :id="'logStepOne'+index" :data='chart'
          @shotImg="shotImg">
        </wave-chart>
      </template>
    </div>

    <!-- -输入配置参数数据-弹窗 -->
    <el-dialog 
      :visible.sync="isShowInputLog"
      :close-on-click-modal="false" 
      width="90%"
      top="5%" 
      center>
      <div>
        <div class="space"
          style="margin-bottom: 10px;">
          <div class="space-title">
            {{$t('page.module')}}：</div>
          <el-checkbox-group v-model="graphicalList">
            <el-checkbox label="1">{{ $t('page.sucrose') + $t('page.highs') }}</el-checkbox>
            <el-checkbox label="2">{{ $t('page.fullSpect') }}</el-checkbox>
            <el-checkbox label="3">{{ $t('page.sucrose') + $t('page.fullSpect') }}</el-checkbox>
          </el-checkbox-group>
        </div>
        <!-- 标签 -->
        <div class="space"
          style="margin-bottom: 10px;">
          <div class="label-title">
            {{$t('page.mark')}}：</div>
          <table id="table-1">
            <tr>
              <td
                v-for="(table,index) in waveName"
                :key="index" width="100">
                <el-input type="text"
                  v-model="beforeLable[index]">
                </el-input>
              </td>
            </tr>
          </table>
        </div>

        <!-- 浓度 -->
        <div class="space">
          <div class="space-title">
            {{$t('page.label')}}：</div>
          <table id="table-1">
            <tr>
              <td
                v-for="(table,index) in waveName"
                :key="index" width="100">
                {{table}}
              </td>
            </tr>
          </table>
        </div>

        <div class="space-btn">
          <el-button type="primary"
            @click="handleCompute()"
            size="small"
            :loading="computeLoading"
            class="btn-submit-color">
            {{$t('page.submit')}}
          </el-button>
        </div>
      </div>
    </el-dialog>

  </div>
</template>
<script>
import waveChart from "@/components/WaveChart";
import { fetchUploadExl, chStep2, chStep1 } from "@/api/table";
import { setStore, getStore } from "@/utils/common";
import { getToken } from "@/utils/auth";
import store from "@/store";
import UploadFile from "./uploadFile.vue";
import { COLORLIST } from "@/utils/variate";
import Saccharose from "./saccharose.vue";
import Histogram from './histogram.vue'

export default {
  data() {
    return {
      graphicalList: ['1', '2', '3'],
      originalData: [],
      originalDataRate: [],
      lightRate: [],
      lightValue: [],
      stepTwoList: [],
      computeLoading: false, //显示计算loading
      computeAllowed: true, //防连点
      isShowInputLog: false, //是否显示公式
      isShowStepOne: false, //是否显示第一步表格
      isShowStepTwo: false, //是否显示第二步表格
      showScreenshotsImg: true, //页面上的曲线隐藏
      isShowUpload: true,
      isShowUploadtxt: false,
      uploadFile: {},
      // mole: '115207373',
      unit: "μg/ml",
      unitOption: ["pg/ml", "ng/ml", "μg/ml", "mg/ml"],
      isShowPer: false,
      percentage: 0,
      customColor: "#e6a23c",
      allLightRateCharts: [],
      allStepOneCharts: [],
      isRepeatSubmit: false,
      extA: "",
      imgList: "",
      lang: getStore("spr-lang") || "zh", // 语言类型
      unitTitle: [],
      parameter: [],
      waveName: [], // 浓度数据
      beforeLable: [], // 标签数据
      baseStepOne: [],
      doDownload: false,
      paramResult: [],
      dissociation: [],
      dissType: "",
      // formulaValue: 0, // 公式选择
      uploadExcel: {
        excel1: null, // 上传的第一个表格
        excel2: null, // 上传的第二个表格
      },
      isShowExcel: "true", // 判断展示哪个上传
      isLoading: false, // 上传按钮loading
      resultValue: {}, // 计算之后的结果
      tooltipList: [], // 用于echarts的tooltip数组
      colorList: COLORLIST, // 颜色列表
      reductionWater: [], // 蔗糖减水全光谱
      subtract: [], // 光谱差
      reductionWaterList: [], // 蔗糖减水表格数据
      map_Max_min: {}, // 柱状图数据
    };
  },
  components: {
    waveChart,
    UploadFile,
    Saccharose,
    Histogram
  },
  methods: {
    setListItem(data) {
      const obj = {};
      const obj1 = {};
      for (const k in data) {
        if ("time" === k) {
          obj[k] = data[k];
        } else {
          obj1[k] = data[k];
        }
      }
      return { ...obj, ...obj1 };
    },

    // 点击上传按钮
    async uploadHandler() {
      this.isLoading = true;
      let formData = new FormData();
      formData.append("type", "formData");
      let { excel1, excel2 } = this.uploadExcel;
      if (excel1 && excel2) {
        formData.append("excel", excel1);
        formData.append("excel1", excel2);
        // isShowExcel = 'true'
      } else if (excel1 || excel2) {
        for (const k in this.uploadExcel) {
          if (this.uploadExcel[k]) {
            this.isShowExcel = k;
            formData.append("excel", this.uploadExcel[k]);
          }
        }
      } else {
        this.isLoading = false;
        return this.$message.warning("请先上传文件");
      }
      try {
        const res = await chStep1(formData);
        this.uploadSuccess(res);
      } catch (err) {
        console.log(err);
      }
      this.isLoading = false;
    },

    // 第一个上传
    UploadImage(data) {
      this.uploadExcel.excel1 = data.file;
      this.percentage = 100;
      setTimeout(() => {
        this.isShowPer = false;
      }, 500);
    },

    /* 第二个上传回调 */
    uploadExcel2(value) {
      this.uploadExcel.excel2 = value;
    },
    // 第二个上传移除文件
    removeFile() {
      if (this.isShowExcel !== "true") {
        return this.handleRemove();
      }
      this.uploadExcel.excel2 = null;
    },
    // 第一个移除文件
    removeFile1() {
      if (this.isShowExcel !== "true") {
        return this.handleRemove();
      }
      this.$refs["rebateUpload"].clearFiles(); //清除文件
      this.uploadExcel.excel1 = null; //清除文件
      this.uploadFile = {};
      // 是否显示上传组件
      this.isShowUpload = true;
      // 文件名字
      this.isShowUploadtxt = false;
      // 清空修改按钮
      // this.isShowStepOne = false
      //上传进度条
      this.percentage = 0;
    },

    goNext(route, type) {
      if (type === 1) {
        setStore("chartData", this.lightRate);
      }
      this.$router.push({ path: route });
    },

    // 修改数据-点击出现弹窗
    changLogData() {
      this.isRepeatSubmit = true;
      this.isShowInputLog = true;
      this.doDownload = false;
      // this.beforeLable = []
    },

    beforeUpload(file) {
      const isZip = file.name.endsWith("zip");
      if (!isZip) {
        return this.$message.error("上传文件仅支持zip格式");
      }
      this.uploadFile = file;
      this.isShowPer = true; // 进度条
      this.isShowUpload = false; // 上传框隐藏
      this.isShowUploadtxt = true; // 显示文件名字
      this.percentage += 60 + Math.floor(Math.random() * 10);
    },
    uploadSuccess(file) {
      if (file.status === 200) {
        this.waveName = file.data.hole;
        this.isShowInputLog = true;

        setStore("auuid", file.data.uuid);
      } else {
        if (file.status === 502) {
          this.$msgbox
            .confirm(this.$t("page.msgBoxLoginOut"), this.$t("page.loginOut"), {
              confirmButtonText: this.$t("page.loginAgin"),
              cancelButtonText: this.$t("page.cancel"),
              type: "warning",
            })
            .then(() => {
              store.dispatch("FedLogOut").then(() => {
                location.reload();
              });
            });
        } else {
          this.$message.error(file.msg);
        }
      }
    },

    // 上传失败
    handleError() {
      this.$message.error("上传失败");
    },

    /* 提交信息 */
    async handleCompute(data) {
      if (this.computeAllowed) {
        this.computeLoading = true;
        this.showScreenshotsImg = true;
        this.baseStepOne = [];
        let info = null;
        const lableList = this.waveName.map(
          (item, index) => this.beforeLable[index] || null
        );
        // 请求参数
        const reqParams = {
          labValue: lableList,
          uuid: getStore("auuid"),
          isRepeatSubmit: this.isRepeatSubmit,
          imageSwitcher: this.graphicalList
        };

        if (data?.isRepeatSubmit) {
          reqParams.tvalue = data.tValue;
          reqParams.isRepeatSubmit = data.isRepeatSubmit;
        }
        try {
          info = await chStep2(reqParams);
        } catch (err) {
          console.log(err);
        }
        if (info && info.status === 200) {
          this.paramResult = [];
          this.originalData = [];
          this.reductionWater = [];
          this.subtract = [];
          // echarts,legend数据
          this.resultValue = info.data.resultValue;
          // 最小的计数器的key
          // this.minKey = info.data.minKey
          this.timeMap = info.data.timeMap;
          // 全光谱
          this.originalData = info.data.originalDataList_original;
          // 蔗糖减水
          this.reductionWater = info.data.originalDataList_ReductionWater;
          // 光谱差
          this.subtract = info.data.originalDataList_subtract;
          // 蔗糖减水表格数据
          this.reductionWaterList = info.data.originalDataList_ReductionWater;
          // 柱状图数据
          this.map_Max_min = info.data.map_Max_min

          this.paramResult = info.data.paramResult;
          this.dissociation = info.data.dissociation;
          this.dissType = info.data.extB;
          if (this.isRepeatSubmit) {
            setStore("auuid", info.data.uuid);
          }

          //v1是旧表，v2是新表
          if (this.dissType === "v1") {
            this.lightRate = info.data.lightRate;
            this.stepTwoList = [];
            this.stepTwoList = info.data.finalResult;

            this.imgList = info.data.imgList;
            this.extA = info.data.extA;
            let loctionTitle = info.data.unitTitle;
            loctionTitle.forEach((item) => {
              let title = [];
              item.forEach((titleItem, index) => {
                if (index === 4) {
                  const sub = `K<sub>a</sub>(10<sup>${titleItem}</sup>M<sup>-1</sup>S<sup>-1</sup>)`;
                  title.push(sub);
                } else if (index === 5) {
                  const sub = `K<sub>d</sub>(10<sup>${titleItem}</sup>S<sup>-1</sup>)`;
                  title.push(sub);
                } else if (index === 6) {
                  const sub = `K<sub>D</sub>(10<sup>${titleItem}</sup>S<sup>-1</sup>)`;
                  title.push(sub);
                } else {
                  title.push(titleItem);
                }
              });
              const data = {};
              data.equa = title;
              this.unitTitle.push(data);
            });

            this.stepTwoList.forEach((dataListItem) => {
              for (let i in dataListItem) {
                if (dataListItem[i].indexOf(this.extA) === 0) {
                  this.parameter = dataListItem[i];
                }
              }
            });
            const stepTwoTitle = { title: this.unitTitle[0].equa };
            this.stepTwoList.unshift(stepTwoTitle);
            this.stepTwoList.map((listItem) => {
              for (let i in listItem) {
                listItem[i].splice(1, 3);
              }
            });
          }

          this.newDrawChart();
          let _this = this;

          _this.$nextTick(() => {
            setTimeout(() => {
              _this.imgUpLoad(info.data.computeCrpValue.value);
              _this.doDownload = true;
            }, 3000);
          });
          this.isShowInputLog = false;
          this.isShowStepOne = true;
          this.isShowStepTwo = true;
        }
        this.computeLoading = false;
        this.isShowLoading = false;
        this.isResetLoading = false;
      }
    },

    /* 生成excali表格 */
    async imgUpLoad(value) {
      await fetchUploadExl({
        crpValue: value,
        uuid: getStore("auuid"),
        //  mole: this.mole,
        imgBase64: this.baseStepOne,
      });
    },

    // 全部清楚数据
    handleRemove() {
      this.$refs["rebateUpload"].clearFiles(); //清除文件
      this.uploadExcel.excel1 = null; //清除文件
      this.uploadExcel.excel2 = null; //清除文件
      this.uploadFile = {};
      this.isShowExcel = "true";

      // 调用子组件清除文件
      // this.$refs.secondUpload.handleRemove()

      //上传框
      this.isShowUpload = true;
      this.isShowUploadtxt = false;
      //可以计算
      this.computeAllowed = true;
      this.computeLoading = false;
      //上传进度条
      this.percentage = 0;
      //显示进度
      this.isShowPer = false;
      this.paramResult = [];
      this.originalData = [];
      this.stepTwoList = [];
      this.allStepOneCharts = [];
      this.isShowStepOne = false;
      this.isShowStepTwo = false;
      this.isShowInputLog = false;
      this.doDownload = false;
      this.baseStepOne = [];
      this.beforeLable = [];
    },

    sortObj(obj) {
      var arr = [];
      for (var i in obj) {
        arr.push([obj[i], i]);
      }
      arr.reverse();
      var len = arr.length;
      var obj = {};
      for (var i = 0; i < len; i++) {
        obj[arr[i][1]] = arr[i][0];
      }
      return obj;
    },

    downloadExl() {
      if (this.isShowStepTwo && this.doDownload) {
        let lang = this.lang === "zh" ? "CN" : "ENG";
        const href = `${
          process.env.BASE_URL
        }receive/download/excel/6/${lang}/${getStore("auuid")}`;
        window.open(href, "_blank");
      } else {
        this.$message({
          type: "error",
          message: this.$t("page.doDownload"),
        });
      }
    },

    opens() {
      setTimeout(() => {
        let triggerResize = new Event("resize");
        window.dispatchEvent(triggerResize);
      }, 0);
    },

    newDrawChart() {
      // const dissocArry = this.dissociation
      const disscoType = this.dissType;
      this.allLightRateCharts = [];
      this.allStepOneCharts = []; // 线形图数据

      this.lightRate.forEach((item, index, arry) => {
        let chartsOption = {
          title: {
            text: "",
          },
          animation: false,
          tooltip: {
            trigger: "axis",
          },

          color: COLORLIST,
          legend: {
            icon: 'circle',
            data: [],
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
          },
          // 保存为图片
          toolbox: {
            feature: {
              saveAsImage: {},
            },
          },
          xAxis: {
            type: "category",
            axisTick: {
              alignWithLabel: true,
            },
            axisLine: {
              onZero: false,
            },
            boundaryGap: false,
            data: [],
          },
          yAxis: {
            type: "value",
          },
          series: [],
        };
        chartsOption.series = [];
        chartsOption.xAxis.data = [];
        let num = 0;

        for (let i in item) {
          if (i !== "time") {
            let chartSeries = {
              name: `${this.beforeLable[num]}`,
              type: "line",
              // smooth: true,
              showSymbol: false,
              hoverAnimation: false,
              data: item[i],
            };
            chartsOption.title.text =
              this.$t("page.ODrate") + this.$t("page.curve");
            chartsOption.legend.data.push(`${this.beforeLable[num]}`);
            chartsOption.series.push(chartSeries);
            num++;
          } else {
            chartsOption.xAxis.data = item[i];
          }
        }
        this.allLightRateCharts.push(chartsOption);
      });

      let _this = this;
      setTimeout(() => {
        _this.showScreenshotsImg = false;
      }, 1500);
    },

    shotImg(isPush = true, data) {
      if(!isPush) return
      this.baseStepOne.push(data);
    },
  },
  computed: {
    // upload: () => {
    //   return `${process.env.BASE_URL}receive/affinity/upload/nanosStep1`
    // },
    headerUpload: () => {
      const data = {};
      data.TOKEN = getToken();
      if (localStorage.getItem("spr-lang") === "en") {
        data.LANG = "ENG"; // 传语言
      }
      return data;
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep {
  .el-dialog--center .el-dialog__body {
    display: flex;
    justify-content: center;
  }
}
.upload-box {
  display: flex;
  justify-content: space-evenly;
  align-items: flex-end;
}
.upload-btn {
  display: flex;
  justify-content: center;
  margin-top: 40px;
  /deep/ .el-button--primary {
    width: 160px;
  }
}
.file-box {
  display: flex;
  justify-content: center;
  align-items: center;
}
.space {
  display: flex;
  margin: 0;
  .space-title,
  .label-title {
    width: 50px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
  .space-title::before {
    content: '*';
    color: red;
    margin-right: 2px;
  }
}
.space-unit {
  margin-bottom: 20px;
}
.space-btn {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  // margin-left: 250px;
}
table {
  border-collapse: collapse;
  text-align: center;
  white-space: nowrap;
}
.reset-back {
  display: flex;
  align-items: center;
  // margin: 0 20px 20px;
  .link {
    cursor: pointer;
    color: #409eff;
    font-style: normal;
    margin-right: 20px;
  }
}
.img-list {
  width: 1000px;
  display: flex;
  flex-wrap: wrap;
}
.img-item {
  width: 500px;
}

#table-2 {
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #000;
}
#table-2 tr {
  border: 1px solid #000 !important;
}

#table-2 td:first-child {
  border-left: 1px solid #000;
}

// 计数器部分的样式
.each-numberBox {
  margin-bottom: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  .computed-text {
    width: 80px;
    margin-right: 6px;
    text-align: end;
    .computed-dot {
      display: inline-block;
      width: 10px;
      height: 10px;
      border-radius: 50%;
    }
  }
}

/* Padding and font style */
#table-2 td,
#table-2 th {
  padding: 10px 15px;
  font-size: 12px;
  font-family: Verdana;
  border-right-width: 1px;
  border-right-style: solid;
}

.data-item {
  display: block;
}

@media screen and (min-width: 1000px) {
  .data-item {
    display: inline-block;
    margin-right: 20px;
  }
}
.space-time {
  display: flex;
}
</style>